<template>
    <div class="zsdx-brand">
        <div class="section">
            <div
                class="section-modules-title"
                style="margin-top: 0.8rem;margin-bottom: 0.4rem;"
            >
                校园品牌说
            </div>

            <div class="brand-list">
                <swiper
                    ref="mySwiperBrand"
                    :options="swiperOptionBrand"
                    @slideChange="slideChange"
                >
                    <swiper-slide v-for="(item, index) in list" :key="index">
                        <div class="brand-item">
                            <div
                                class="brand-cover"
                                :style="
                                    'background-image: url(' +
                                        item.brand_cover +
                                        ')'
                                "
                            ></div>
                            <div class="brand-info">
                                <div class="top-info">
                                    <div class="brand-title ellipsis">
                                        {{ item.brand_title }}
                                    </div>
                                    <div class="brand-desc ellipsis-3">
                                        {{ item.brand_info }}
                                    </div>
                                </div>
                                <div class="brand-types">
                                    <span>{{
                                        showText(
                                            item.brand_name,
                                            item.company_name
                                        )
                                    }}</span>
                                    <span>{{ item.sub_category_title }}</span>
                                </div>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
                <div class="pagation-solution">
                    <ul class="pagation-container">
                        <li
                            v-for="(item, index) in list"
                            :key="index"
                            :class="brandBannerIndex == index ? 'active' : ''"
                        ></li>
                    </ul>
                    <a
                        v-show="showMore"
                        href="javascript:;"
                        class="more-solution-btn"
                        @click="fnGoPage('/brand')"
                        >查看更多</a
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ZsdxBrand',
    props: {
        showMore: {
            type: Boolean,
            default: true
        },
        list: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            swiperOptionBrand: {
                loop: true,
                slidesPerView: 'auto'
            },
            brandBannerIndex: 0
        }
    },
    computed: {},
    methods: {
        showText(brand, company) {
            if (brand === company) {
                return brand
            } else {
                return brand + '/' + company
            }
        },
        slideChange() {
            this.brandBannerIndex =
                this.$refs.mySwiperBrand.$swiper.realIndex || 0
        },
        fnGoPage(url) {
            this.$router.push({ path: url })
        }
    }
}
</script>

<style lang="less" scoped>
.section {
    .brand-list {
        width: 7.02rem;
        margin: 0 auto;
        margin-bottom: 0.8rem;
        .brand-item {
            display: flex;
            .brand-cover {
                width: 2.4rem;
                height: 3.2rem;
                background: #cccccc;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
            }
            .brand-info {
                flex: 1;
                padding: 0.4rem 0.34rem 0.4rem 0.2rem;
                background: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .top-info {
                    .brand-title {
                        font-size: 0.36rem;
                        font-weight: 400;
                        color: rgba(29, 32, 35, 1);
                        width: 4.08rem;
                        margin-bottom: 0.22rem;
                    }
                    .brand-desc {
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: rgba(136, 144, 156, 1);
                        line-height: 0.36rem;
                        width: 4.08rem;
                    }
                }
                .brand-types {
                    font-size: 0.24rem;
                    font-weight: 400;
                    color: rgba(136, 144, 156, 1);
                    line-height: 0.24rem;
                }
            }
        }
        .pagation-solution {
            height: 0.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            .pagation-container {
                display: flex;
                li {
                    width: 0.24rem;
                    height: 0.04rem;
                    background: rgba(250, 250, 250, 0.5);
                    border-radius: 0.06rem;
                    margin-right: 0.08rem;
                    &.active {
                        background: rgba(0, 187, 255, 1);
                    }
                }
            }
            .more-solution-btn {
                font-size: 0.24rem;
                font-weight: 500;
                color: rgba(0, 187, 255, 1);
                line-height: 0.24rem;
                text-decoration: underline;
                margin-left: 0.1rem;
            }
        }
    }
}
</style>
